<!--
<template>
  <el-card style="max-width: 480px;margin: 200px auto">
    <h1>学生管理系统</h1>
    <el-form :model="form" label-width="auto" style="max-width: 480px">
      <el-form-item label="账号">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" type="password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登 录</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "LoginView",
  data(){
    return {
      form : {username:'',password:''}   //username=xxx&password=xx
    }
  },
  methods:{
    login(){

      this.$axios.post('/login',this.$qs.stringify(this.form))
          .then(result => {
            console.log('login',result.data)

            if(result.data.code === 200 ){

              if(result.data.data){

                ElMessage('登录成功')
                this.$router.push({path:'/index'})
              }else{
                ElMessage.error('账号或密码错误')
              }
            }
          })
    }
  }
}
</script>
-->
<template>
  <el-card style="max-width: 480px; margin: 200px auto; background-color: #f9f9f9; border-radius: 10px;">
    <h1 style="text-align: center; color: #409EFF;">学生管理系统</h1>
    <el-form :model="form" label-width="auto" style="max-width: 480px; margin-top: 30px;" @keydown="handleKeydown">


      <el-form-item label="账号">
        <el-input v-model="form.username" placeholder="请输入账号"/>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" type="password" placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login" style="width: 100%; background-color: #409EFF; border-color: #409EFF;">
          登 录
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="text" @click="goRegister" style="width: 100%; color: #409EFF;">
          注册账户
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "LoginView",
  data() {
    return {
      form: {username: "", password: ""} // username=xxx&password=xx
    };
  },
  methods: {
    login() {
      this.$axios
          .post("/login", this.$qs.stringify(this.form))
          .then((result) => {
            console.log("login", result.data);

            if (result.data.code === 200) {
              if (result.data.data) {
                ElMessage("登录成功");
                //保存用户的信息
                localStorage.setItem('user',JSON.stringify(result.data.data))
                this.$router.push({path: "/index"});
              } else {
                ElMessage.error("账号或密码错误");
              }
            }
          });
    },
    goRegister() {
      this.$router.push({path: "/register"}
      );
    },
    handleKeydown(event) {
      // 检查是否按下了回车键
      if (event.key === "Enter") {
        event.preventDefault(); // 阻止回车的默认行为
        this.login();
      }
    }
  }
};
</script>

<style scoped>
h1 {
  font-weight: bold;
  color: #409EFF;
}
</style>
